<template>
  <view class="collect">
    <view class="tabs">
      <view class="tab-bar">
        <view
          class="tab-bar-item"
          v-for="(item, index) in tabBars"
          @click="changeTabs(item)"
          :key="index"
        >
          <view class="bar" :class="[tabType === item.type ? 'active': '']">{{item.name}}</view>
        </view>
      </view>
    </view>

    <view class="collect-content">
      <collect-news v-if="tabType === 1" ref="news" />
      <collect-exam v-if="tabType === 3" ref="exam" />
    </view>
  </view>
</template>

<script>
import { post_md5 } from './../../common/request'
import collectNews from './collect-news'
import collectExam from './collect-exam'

export default {
  components: {
    collectNews,
    collectExam
  },
  onShow() {
    var pages = getCurrentPages()
    var currentPage = pages[pages.length - 1]
    if (this.tabType === 1) {
      if (currentPage && currentPage.data) {
        let newsId = currentPage.data.removeNewsId
        if (newsId) {
          this.$refs.news.remove(newsId)
        }
      }
    }

    if (this.tabType === 3) {
      this.$refs.exam.loadExamList()
    }
  },
  data() {
    return {
      tabType: 1,
      tabBars: [
        {
          name: '新闻',
          type: 1
        },
        {
          name: '考试',
          type: 3
        }
      ]
    }
  },
  methods: {
    changeTabs(item) {
      this.tabType = item.type
    }
  },
  onPullDownRefresh() {
    if (this.tabType === 1) {
      this.$refs.news.reload()
    } else {
      uni.stopPullDownRefresh()
    }
  },
  onReachBottom() {
    this.$refs.news.loadMore()
  }
}
</script>

<style lang="less">
.collect {
  width: 100%;
  .tabs {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    width: 100%;
    position: fixed;
    height: 46px;

    .tab-bar {
      display: flex;
      justify-content: space-around;

      .tab-bar-item {
        flex: 1;
        display: flex;
        justify-content: center;

        .bar {
          padding: 20upx 0;
          font-size: 32upx;
          text-align: center;
          width: 120upx;

          &.active {
            border-bottom: 6upx solid #409eff;
            color: #409eff;
            font-weight: bold;
          }
        }
      }
    }
  }

  .collect-content {
    margin-top: 46px;
  }

  .icon-go {
    width: 20upx;
    height: 20upx;
  }
}
</style>
